<template>
  <view class="content">
    <z-paging
      ref="paging"
      refresher-only
       @onRefresh="onRefresh">

      <image class="logo" src="/static/logo.png" />
      <view class="text-area">
        <text class="title">{{ title }}</text>
      </view>

      <view class="card">
        <view class="row">Base URL：{{ BASE_URL }}</view>
        <button class="btn" :disabled="loading" @tap="ping">
          {{ loading ? '请求中...' : '测试请求 /hello' }}
        </button>
        <view class="row ok" v-if="result">结果：{{ JSON.stringify(result) }}</view>
        <view class="row err" v-if="errorMsg">错误：{{ errorMsg }}</view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { get } from '@/utils/request'
import { BASE_URL } from '@/config/env'

const paging = ref(null)
const dataList = ref([])

const title = ref('Hello')
const loading = ref(false)
const result = ref<any>(null)
const errorMsg = ref('')

async function ping() {
  loading.value = true
  errorMsg.value = ''
  result.value = null
  try {
    // 示例：尝试请求 /ping（请按你后端实际接口调整）
    const data = await get('/hello/hello')
    result.value = data
  } catch (e: any) {
    errorMsg.value = e?.message || '请求失败'
  } finally {
    loading.value = false
  }
}

async function onRefresh() {
  console.log('下拉刷新')
  setTimeout(() => {
					// 1.5秒之后停止刷新动画
          paging.value.complete()
			}, 1500)
}

onMounted(() => {
  // 进入首页自动跳转到登录页
  // console.log('进入首页')
  // uni.navigateTo({
  //   url: '/pages/view/loginView',
  //   success: () => console.log('跳转成功'),
  //   fail: (err) => console.error('跳转失败', err),
  // })
  uni.redirectTo({ url: '/pages/view/loginView' })
})
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

/* 示例区块样式 */
.card {
  margin-top: 30rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  border: 1px solid #eee;
  width: 90%;
  box-sizing: border-box;
}

.row {
  margin: 12rpx 0;
  font-size: 28rpx;
  color: #333;
  word-break: break-all;
}

.btn {
  margin-top: 12rpx;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  background-color: #007aff;
  color: #fff;
}

.ok {
  color: #2ecc71;
}

.err {
  color: #e74c3c;
}
</style>
